<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{list-style: none;margin:0px;padding:0px;}
        #box{width:400px;height:auto;overflow:hidden;margin:20px auto;}
        ul{width:100%;height:auto;overflow:hidden;padding-bottom:10px;}
        button{margin-left:200px;width:60px;height:30px;}
        li{width:100%;height: 40px;
        border-bottom: 1px solid red;line-height:40px;}
        .update{width:45px;height:30px;background: green;text-align: center;line-height: 30px;color: #ffffff;display: block;float: right;margin-right:10px;margin-top:5px;}
        .delete{width:45px;height:30px;background: red;text-align: center;line-height: 30px;color: #ffffff;display: block;float: right;margin-top:5px;}
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li>列表1
            <span class="delete">删除</span>
            <span class="update">修改</span>
            </li>
            <li>列表2
            <span class="delete">删除</span>
            <span class="update">修改</span>
            </li>
            <li>列表3
            <span class="delete">删除</span>
            <span class="update">修改</span>
            </li>
            <li>列表4
            <span class="delete">删除</span>
            <span class="update">修改</span>
            </li>
            <li>列表5
            <span class="delete">删除</span>
            <span class="update">修改</span>
            </li>
        </ul>
        <button>添加</button>
    </div>
    <script>
        //1、找到按钮发生事件
        var btn = document.getElementsByTagName("button")[0];
        var ul = document.getElementsByTagName("ul")[0];
        btn.onclick = function(){
            //弹出输入框
            var value = window.prompt("请输入内容");
            //根据结果判断
            if(value!=null){
                //创建新的li节点
                var li = document.createElement("li");
                li.innerHTML = value+"\
                                <span class='delete'>删除</span>\
                                <span class='update'>修改</span>";
                ul.appendChild(li);
            }
        }

        //2、在父元素身上添加事件
        ul.onclick = function(ev){
            //3、实际发生事件的到底是哪一个子元素??
            //this?? -- ul
            //事件对象 target || srcElement

            var e = ev || window.event;
            var obj = e.target || e.srcElement;
            //判断节点
            if(obj.nodeName == "SPAN"){
                 var a = obj.className;
                 switch(a){
                     case 'delete':
                            if(window.confirm("是否需要执行删除??")==true){
                                obj.parentNode.remove();
                            }
                            break;
                     case 'update':
                            var value = window.prompt("请输入内容");
                            //根据结果判断
                            if(value!=null){
                                obj.parentNode.innerHTML = value+"\
                                <span class='delete'>删除</span>\
                                <span class='update'>修改</span>";
                            }
                 }
            }
        }
    </script>
</body>
</html>